<!DOCTYPE html>
{% load static %}
<!-- saved from url=(0044)https://www.jq22.com/demo/jquery-dz20160204/ -->
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitter“点赞”红心按钮CSS3动画特效</title>

    <link rel="stylesheet" type="text/css" href="{% static 'css/up_down/style.css' %}">
</head>
<body>
<article class="htmleaf-container">
    <div id="container">
        <h3>点击下面的红心查看效果！</h3>

        <div class="feed" id="feed1">
            <p>W3C </p>
            <div class="heart" id="like1" rel="like" style="background-position: left center;"></div>
            <div class="likeCount" id="likeCount1">14</div>
        </div>

        <div class="feed" id="feed2">
            <p>百度一下</p>
            <div class="heart" id="like2" rel="like" style="background-position: left center;"></div>
            <div class="likeCount" id="likeCount2">10</div>
        </div>

    </div>

</article>

<script src="{% static 'js/up_down/jquery-1.11.0.min.js.下载' %}" type="text/javascript"></script>

<script>
    $(document).ready(function () {

        $('body').on("click", '.heart', function () {
            var A = $(this).attr("id");
            var B = A.split("like");
            var messageID = B[1];
            var C = parseInt($("#likeCount" + messageID).html());
            $(this).css("background-position", "")
            var D = $(this).attr("rel");

            if (D === 'like') {
                $("#likeCount" + messageID).html(C + 1);
                $(this).addClass("heartAnimation").attr("rel", "unlike");
            } else {
                $("#likeCount" + messageID).html(C - 1);
                $(this).removeClass("heartAnimation").attr("rel", "like");
                $(this).css("background-position", "left");
            }
        });


    });
</script>

</body>
</html>